<template>
  <common-card title="今日订单" :value="orderToday | numberFormat">
    <template>
      <!-- 一定要指定宽高 -->
      <div ref="today-orders-chart" style="width: 100%;height: 100%;"></div>
      <!-- <v-chart :options="getOptions()"/> -->
    </template>
    <!-- <template v-slot:total> -->
    <template #total>
      <span>昨日订单量</span>
      <span class="emphasis">{{orderLastDay | numberFormat}}</span>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
import throttle from 'lodash/throttle'
export default {
  name: 'TodayOrders',

  computed: {
    /* 
    "orderToday": 2562061,
  "orderLastDay": 2100000,
  "orderTrend": [610, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220],
  "orderTrendAxis": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00"],
    */
    ...mapState({
      orderToday: state => state.data.reportData.orderToday,
      orderLastDay: state => state.data.reportData.orderLastDay,
      orderTrend: state => state.data.reportData.orderTrend,
      orderTrendAxis: state => state.data.reportData.orderTrendAxis,
    })
  },

  /* 
    问题: 没数据时setOption(), 等到有数据时再setOption()显示效果不正常
    解决: 没有数据时不要setOption
  */

  watch: {
    // 有了数据后就会执行  => setOption()
    orderTrend () {
      this.chart.setOption(this.getOptions())
    }
  },

  mounted () { // 此时数据还没有回来, 等数据回来后不会自动再执行 ==> 图表不显示
    // 基于准备好的dom，初始化echarts实例
    this.chart = this.$echarts.init(this.$refs['today-orders-chart']);
    // 绘制图表
    // this.chart.setOption(this.getOptions())

    // 绑定窗口大小改变的监听
    // window.onresize = () => {}  // 只能绑定一个
    window.addEventListener('resize', throttle(() => {
        console.log('------')
        this.chart.resize()
    }, 500))
  },

  methods: {

    // 返回图片的配置对象
    getOptions () {
      return {
        // x轴
        xAxis: {
          // 不显示
          show: false, 
          // type: 'category',
          // 两侧是否留白
          boundaryGap: false,
          // x轴数据列表
          data: this.orderTrendAxis
        },
        // y轴
        yAxis: {
          // type: 'value'
          // 不显示
          show: false, 
        },
        // 系列
        series: [
          {
            name: '实时订单数',  // 名称
            data: this.orderTrend,
            // 折线图
            type: 'line',
            // 指定区域样式
            areaStyle: {
              color: '#A64CA6' // 颜色
            },
            // 线条的样式
            lineStyle: {
              opacity: 0, // 隐藏线条
            },
            // 点的样式
            itemStyle: {
              opacity: 0, // 隐藏点
            },
            // 光滑
            smooth: true
          }
        ],

        // 网格: 图形充满容器
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },

        // 提示框
        tooltip: {
          trigger: 'axis' // 不能用item
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
